<template>
  <div class="index">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link v-for="(item,index) in footerList" :key="index" :to="item.path">
        <dl>
          <dt>
            <van-icon :name="item.con" />
          </dt>
          <dd>{{item.name}}</dd>
        </dl>
      </router-link>
    </footer>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      footerList: [
        {
          path: "/index/home",
          name: "首页",
          con: "wap-home-o"
        },
        {
          path: "/index/room",
          name: "找房",
          con: "shop-o"
        },
        {
          path: "/index/release",
          name: "发布",
          con: "add-o"
        },
        {
          path: "/index/message",
          name: "消息",
          con: "chat-o"
        },
        {
          path: "/index/my",
          name: "我的",
          con: "user-o"
        }
      ]
    };
  }
};
</script>

<style>
.index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.index main {
  flex: 1;
  overflow-y: auto;
}

.index footer {
  width: 100%;
  height: 50px;
  /* border-top: 1px solid #ccc; */
  display: flex;
  align-items: center;
  justify-content: space-around;

}

.index footer dl {
  text-align: center;
}

.index footer dl dt i {
  font-size: 20px;
}

.index footer a{
  color: #ccc;
}

.index footer .router-link-exact-active {
  color: #fd9b3c;
}
</style>